import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { CallrecordQuery } from '../sevice/PhoneServe';
import { NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom';

export default function TakeDetail() {
  const navigate = useNavigate();
  const { info } = useParams();
  const [infolist, setinfolist] = useState([])
  useEffect(() => {

    (async () => {
      let { data } = await CallrecordQuery()
      setinfolist(data.rows.filter(item => item.id == info)[0])
    })()
  }, [])


  return (
    <>
      <NavBar
        onClickLeft={() => { navigate(-1) }}
        title="订单详情"
        style={{
          marginBottom: "12px",
        }}></NavBar>
      <div style={{ backgroundColor: '#F7F7F9' }}>

        <div style={{ backgroundColor: '#FFFFFF', marginTop: 10, marginBottom: 10, padding: 10 }}>
          <div style={{ fontSize: 15 }}>交易金额(人民币元)
            <span style={{ color: 'green', fontSize: 10, marginLeft: 90 }}>充值成功</span></div>
          <div style={{ fontSize: 30 }}>{infolist.rechargeAmount}</div>


        </div>

      </div>
      <div style={{ paddingLeft: 10, fontSize: 15 }}>
        <div style={{ marginBottom: 10 }}>充值号码 <span style={{ marginLeft: 40 }}>{infolist.phonenumber}</span></div>
        <div style={{ marginBottom: 10 }}>收费金额 <span style={{ marginLeft: 40 }}>{infolist.paymentAmount}</span></div>
        <div style={{ marginBottom: 10 }}>充值金额 <span style={{ marginLeft: 40 }}>{infolist.rechargeAmount}</span></div>
        <div style={{ marginBottom: 10 }}>充值方式 <span style={{ marginLeft: 40 }}>{infolist.paymentType}</span></div>
        <div style={{ marginBottom: 10 }}>交易时间 <span style={{ marginLeft: 40 }}>{infolist.rechargeTime}</span></div>
      </div>


    </>
  )
}
